<template>
  <div>
    <myheaders></myheaders>


    <!-- 导入面包屑导航组件 -->
    <Breadcrumb :datas='datas'></Breadcrumb>

    <section class="featured-block text-center">
      	<quill-editor ref="myTextEditor" v-model="content" ></quill-editor>
        <div class="container">
            <div>商品名称：<input type="text" v-model="name"></div>
            <br>

            <div>商品价格：<input type="text" v-model="price"></div>
            <br>
            
            <div>商品分类：
                <select id='select'>
                    <option v-for="(item,index) in cate_list" :key="index" :value='item.id'>
                        {{item.cname}}
                    </option>
                </select>
            </div>
            <br>

            <div>商品描述：<textarea id="" cols="30" rows="5" v-model="desc"></textarea></div>
            <br>

            颜色:<input type="text" v-model="color">

            <br><br> 

            薄厚:<input type="text" v-model="season">

            <br>
            商品标签：<TagInput v-model="mytags" type="string" split="," placeholder="请输入标签，输入完毕后按回车确认"></TagInput>


            <Button color=blue @click="add">提交</Button>
        </div>
    </section>

    <myfooters></myfooters>

  </div>

</template>
<script>
// 导入头部组件
import myheader from "./myheader";
// 导入尾部组件
import myfooter from "./myfooter";
import {quillEditor} from 'vue-quill-editor';
// 引入编辑器样式
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

export default {
    data() {
    return {
      // 面包屑导航
        datas: [{ title: "首页", route: { name: "index" } },{ title: "商品修改页", route: { name: "addgoods" } }],
        name: "",
        cate_list: [],
        src:'',
        price: "",
        desc: "",
        param: "",
        color:'',
        season:'',
        mytags:'',
        content:''
    };
    },
  //   定义组件
    components: {
      myheaders: myheader,
      myfooters: myfooter,
      quillEditor
    },

    mounted: function() {
    this.axios({
        url: "http://localhost:8000/addgoods/"
    }).then(res => {
        console.log(res);
        this.cate_list = res.data.cate_list;
    });
    //调用接口
  	this.getdata();
    },
    methods: {
    //添加商品
    add: function() {
        let form_data = new FormData();
        //声明文件对象
        var sel = document.getElementById("select");
        //将变量转换为字符串
        var param_str = {'color':this.color,'season':this.season}
        // var tags = this.series+','+this.style
        //强转 
        param_str = JSON.stringify(param_str);
        console.log(param_str);
        //从json 转为字符串  JSON.parse()
        //添加文件
        form_data.append("id", this.$route.query.id);
        form_data.append("name", this.name);
        form_data.append("price", this.price);
        form_data.append("desc", this.content);
        form_data.append("parms", param_str);
        form_data.append("cate_id", sel.value);

      //请求后台接口
        this.axios({
        url: "http://localhost:8000/updategoods/",
        method: "POST",
        data: form_data,
        headers: {
            "Content-Type": "multipart/form-data"
        }
        }).then(res => {
        console.log(res);
        this.$Message(res.data.message);
        this.axios.get('http://localhost:8000/updatetags/',{params:{id:res.data.id,tags:this.mytags}}).then((result) =>{

              console.log(result);
     		 });

        });
    },
    //商品信息接口
  	getdata:function(){


  	this.axios({
			url:'http://127.0.0.1:8000/gooditem/',
			params:{
				gid:this.$route.query.id
			}
		}).then(resp=>{
			console.log(resp)
			this.name = resp.data.data.name
			this.price = resp.data.data.price
			this.content = resp.data.data.desc
			var parms = resp.data.data.parms
			//转换类型
			parms = JSON.parse(parms)
			this.color = parms.color
			this.season = parms.season

      });
      //请求商品标签详情
      this.axios.get('http://localhost:8000/gettags/',{params:{id:this.$route.query.id}}).then((result) =>{

      console.log(result);

      	// 赋值
      	var mytags = result.data.tags;
      	mytags = mytags.join(",");
      	this.mytags = mytags;
      	//console.log(mytags);


		 });

      }
    }     
}
</script>


<style>
</style>
